<template>
  <div>
    <div
      class="machine relative bg-[#fff] max-h-[900px] my-2 md:mx-[2em] flex flex-col justify-center slot1"
      data-v-7f13ab74=""
    >
      <div
        ref="main"
        class="slot w-screen max-w-[1400px] flex overflow-hidden relative"
        data-v-7f13ab74=""
      >
        <div
          class="window flex box"
          ref="box"
          data-v-7f13ab74=""
          :style="`transform: translateX(0px)`"
        >
          <div
            v-for="(item, index) in prodList"
            class="item-container text-center bg-[#fff] border-r-0 border-[#eee] box-border"
            data-v-7f13ab74=""
          >
            <div data-v-7f13ab74="" style="padding: 10px">
              <div
                class="text-black-85 w-full bg-white relative rounded overflow-hidden aspect-w-1 aspect-h-1 group border"
                data-v-3c7db675=""
                data-v-7f13ab74=""
                :style="`width: ${
                  num >= 3 ? 140 + (5 - num) * 20 : '230'
                }px; border-color: rgba(0, 0, 0, 0.133)`"
              >
                <div class="border-t-[6px] text-rarities-2" data-v-3c7db675="">
                  <div
                    class="p-2.5 text-xs absolute z-10 top-0 slot-item-name font-bold"
                    data-v-3c7db675=""
                  >
                    <div>{{ item.goods_name }}</div>
                  </div>
                  <div
                    class="w-[90%] h-[50%] absolute z-auto top-[30%] left-[5%] bg-no-repeat bg-contain bg-center"
                    data-v-3c7db675=""
                    :style="
                      'background-image: url(' +
                      item.good_images +
                      '); background-size: contain;'
                    "
                  ></div>
                  <div
                    class="absolute -bottom-2 left-0 text-rarities-2"
                    data-v-3c7db675=""
                  >
                    <svg
                      height="22"
                      viewBox="0 0 180 8"
                      fill="currentColor"
                      xmlns="http://www.w3.org/2000/svg"
                      data-v-3c7db675=""
                      style="width: 100%"
                    >
                      <path
                        opacity="0.2"
                        d="M180 0L90 5.33333V8H180V0Z"
                        data-v-3c7db675=""
                      ></path>
                      <path
                        opacity="0.6"
                        d="M0 0L180 6V8H0V0Z"
                        data-v-3c7db675=""
                      ></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
function copyAndShuffleArray(func) {
  let arr = func();
  let len = arr.length;
  let i = 0;
  while (len < 50 && i < 10) {
    i++;
    arr = arr.concat(arr.slice(0, 50 - len));
    len = arr.length;
  }
  for (let i = len - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

export default {
  props: ["list", "num"],
  mounted() {
    this.prodList = copyAndShuffleArray(() => this.list);

    this.$refs.box.addEventListener("transitionend", () => {
      // console.log("结束");
      this.$emit("success", this.item);
    });
  },
  data() {
    return {
      prodList: [],
      item: {},
    };
  },
  methods: {
    open(goods) {
      let mainEl = this.$refs.main;
      let width = 250;
      if (this.num >= 3) {
        width = 160 + (5 - this.num) * 20;
      }
      this.item = goods;
      this.prodList.splice(45, 1, this.item);
      this.$refs.box.style = `transform: translateX(-${
        45.5* width - (mainEl.clientWidth / 2)
      }px);`;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  transition: 6s cubic-bezier(0.42, 0, 0.58, 1);
}
</style>
